<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>echarts-ajax</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="main" style="width:1000px; height:280px;"></div><!--这边对div设置了id-->
    <script>
        var chart = echarts.init(document.getElementById('main'), 'black', {renderer: 'canvas'});//初始化在该高宽容器中
        $(
            function () {
                fetchData(chart);
                setInterval(getDynamicData,2000);//包装函数
            }
        );
        $.ajaxSetup( {
             url: "/index.html" , // 默认URL，<表示当前页面></表示当前页面>
            aysnc: true , // 改为异步加载的方式
            type: "POST" , // 默认使用POST方式
             headers: { // 默认添加请求头
                 "Author": "CodePlayer" ,
             "Powered-By": "CodePlayer"
        } ,
        error: function(jqXHR, textStatus, errorMsg){ // 出错时默认的处理函数
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能为： "Not Found"、"Internal Server Error"等

        // 提示形如：发送AJAX请求到"/index.html"时出错[404]：Not Found
        alert( '发送AJAX请求到"' + this.url + '"时出错[' + jqXHR.status + ']：' + errorMsg );
        }
    } );
        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/line/",//指令url，映射到view里的函数
                dataType: "json",
                success: function (result) {//访问成功
                    var options = result.data;
                    chart.setOption(options);//显示配置的图表
                    old_data = chart.getOption().series[0].data;

                }
            });
        }
         function getDynamicData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/lineUpdate/",
                dataType: 'json',
                success: function (result) {
                    var options = result.data;
                    old_data.push([options.name, options.value]);//将更新函数传入的参数push到old data中

                    chart.setOption({
                        xAxis: {
                            type: 'category',
                            boundaryGap: true,
                        },
                        series: [{
                            data: old_data.slice(-10,-1)//对数据做截断
                        }]
                    });
                }
            });
        }
    </script>
</body>
</html>
